<template>
  <!-- 预览 -->
  <div
    class="preview"
    v-if="ARTICLE_OPS_TYPE.preview === currentType"
  >
    <h2>{{ oldForm.stem }}</h2>
    <p v-html="oldForm.content"></p>
  </div>
  <!-- 编辑 -->
  <el-form
    ref="articleFormRef"
    :model="articleForm"
    :rules="articleRules"
    label-width="80px"
    v-else
  >
    <el-form-item
      label="标题"
      prop="stem"
    >
      <el-input
        placeholder="请输入标题"
        :maxLength="20"
        v-model.trim.lazy="articleForm.stem"
      ></el-input>
    </el-form-item>
    <!-- 富文本编辑器 -->
    <el-form-item label="内容">
      <quill-editor
        v-model:content="articleForm.content"
        placeholder="请输入文本内容"
        toolbar="full"
        theme="snow"
        contentType="html"
      ></quill-editor>
    </el-form-item>
    <el-form-item v-if="ARTICLE_OPS_TYPE.preview !== currentType">
      <el-button
        type="primary"
        @click="onSubmit"
      >{{ `${ARTICLE_MAP[currentType].charAt(0)} ${ARTICLE_MAP[currentType].charAt(1)}` }}</el-button>
      <el-button @click="">重 置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
  import { ARTICLE_OPS_TYPE, ARTICLE_MAP } from '@/constant/article'
  import { ElMessage } from 'element-plus';
  import { reactive, ref, defineProps } from 'vue';
  import { modifyArticleApi, getArticleDetailApi, addArticleApi } from '@/api/article'
  // 父传子
  const { currentType, articleId } = defineProps({
    // 当前文章操作类型
    currentType: {
      type: String,
      required: true
    },
    // 文章 id
    articleId: {
      type: String,
      default: ''
    }
  })

  // 子传父
  const emits = defineEmits()
  // 文章表单 
  const articleForm = reactive({
    id: '',
    stem: '',
    content: ''
  })

  // 校验规则
  const articleRules = {
    // stem: [
    //   { required: true, message: '标题不能为空', triggle: 'blur' },
    //   { min: 5, max: 30, message: '标题长度只能在5-30之间', triggle: 'blur' }
    // ],
    content: [
      { required: true, message: '内容不能为空', triggle: 'blur' }
    ]
  }
  // 文章DOM
  const articleFormRef = ref(null)
  var oldForm = ref({})
  // 获取文章详情
  const getArticleDetail = async (id) => {
    try {
      const { data } = await getArticleDetailApi(id)
      for (let key in articleForm) {
        // 有就赋值 没有就默认的
        articleForm[key] = data[key] || articleForm[key]

      }
      oldForm.value = { ...articleForm }
    } catch (e) { }
  }
  getArticleDetail(articleId)

  // 清空文章内容
  const clearForm = () => {
    articleFormRef.value.resetFields()
    articleForm.content = '<p><br></p>'
  }

  // 表单提交
  const onSubmit = () => {
    articleFormRef.value.validate(async (valid) => {
      if (!valid) return ElMessage.error('请输入正确的格式')

      if (ARTICLE_OPS_TYPE.add === currentType) {
        // 新增
        addArticleApi(articleForm)
        // 清空内容
        clearForm()
      } else if (ARTICLE_OPS_TYPE.modify === currentType) {
        // 修改
        modifyArticleApi(articleForm)
      }
      // 提示成功
      ElMessage.success(`${ARTICLE_MAP[currentType]}成功！`)
      // 关闭编辑框
      emits('close')
      // 刷新数据
      emits('getArticleList')
    })
  }

</script>

<style scoped>
  .el-form {
    .el-input {
      height: 36px;
    }

    :deep(.ql-container) {
      width: 100%;
      height: 40vh;
    }

    .el-form-item:last-child {
      margin-top: 0px;
    }
  }
</style>